<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/1/7
  Time: 22:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>
    <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <style>
        #book{
            float: left;
            width: 57%;
            height: 390px;
        }
        #type{
            float: left;
            width: 43%;
            height: 390px;
        }
    </style>
</head>
<body>
<div id="book"></div>
<div id="type"></div>

<script>
    $(function (){
        var type = []
        var typename=[]
        $.ajax({
            url: '${pageContext.request.contextPath}/tongji/cktype',
            type: 'post',
            async: false,
            dataType: 'json',
            success: function (data) {
                for (let i = 0; i < data.length; i++) {
                    type.push({
                        value:data[i].value,
                        name:data[i].typename
                    });
                    typename.push(
                        {
                            name:data[i].typename
                        }
                    )
                }
            }
        })

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('type'));
        option = {
            title: {
                text: '销售书籍类型数量统计',
                subtext: '',
                center: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: typename,
            },
            series: [
                {
                    name: '类型',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: type,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);



        var book = []
        var bookname=[]
        $.ajax({
            url: '${pageContext.request.contextPath}/tongji/ckbook',
            type: 'post',
            async: false,
            dataType: 'json',
            success: function (data) {
                for (let i = 0; i < data.length; i++) {
                    book.push({
                        value:data[i].value,
                        name:data[i].bookname
                    });
                    bookname.push(
                        {
                            name:data[i].bookname
                        }
                    )
                }
            }
        })

        // 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('book'));
        option2 = {
            title: {
                text: '销售书籍数量统计',
                subtext: '',
                center: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: bookname,
            },
            series: [
                {
                    name: '书名',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: book,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
    })
</script>
</body>
</html>
